<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	
	const userInfo = reactive({
		avatarUrl: "",
		nickname: "",
	})
	
	const onChooseAvatar = (e) => {
		console.log(e)
		userInfo.avatarUrl = e.detail.avatarUrl
	}
	
	const onClickSave = () => {
		console.log(userInfo);
	}
</script>

<template>
	<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		<image v-if="userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl"></image>
		<view v-else class="avatar">
			<open-data type="userAvatarUrl"></open-data>
		</view>
	</button>
	<uv-list border>
		<uv-list-item>
			<view style="display: flex;padding: 20rpx 30rpx;">
				<view style="margin-right: 80rpx;">昵称</view>
				<input type="nickname" placeholder="请输入昵称" v-model="userInfo.nickname"/>
			</view>
		</uv-list-item>
	</uv-list>
	<view style="height: 200rpx;"></view>
	<view style="display: flex;justify-content: center;">
		<uv-button 
		@click="onClickSave"
		text="保存" 
		shape="circle" 
		color="linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)"
		customStyle="width: 300rpx"></uv-button>
	</view>
	
</template>

<style scoped lang="scss">
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}
</style>
<style>
	page {
		background-color: white !important;
	}
</style>